<template>
  <div class="home" style="min-height: 100%">
    <el-container style="height: 800px;">
      <el-aside :style="{'background-color':theme.menu.bg}">
        <el-menu router :background-color="theme.menu.bg"  :text-color="theme.menu.text" :active-text-color="theme.menu.active" default-active="1-4-1" class="el-menu-vertical-demo"  :collapse="isCollapse">
<!--          菜单列表-->
          <div class="logo" @click="gotoPage" :style="{'background-color':theme.logo}">
            <i v-if="isCollapse" class="el-icon-s-home"></i>
            <span v-else>校园系统管理</span>
          </div>
            <el-submenu :index="item.id+''" v-if="item.type==1" v-for="(item,index) in menulist" :key="index">
              <template slot="title">
                <i :class="item.icon"></i>
                <span slot="title">{{item.title}}</span>
              </template>
              <el-menu-item-group v-for="(group,index) in item.group" :key="index">
                <template v-if="group.title" slot="title">{{group.title}}</template>
                <el-menu-item  :index="menu.path" v-for="menu in group.menu" :key="menu.id">{{menu.title}}</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-menu-item :index="item.path" v-else>
              <i class="item.icon"></i>
              <span slot="title">{{item.title}}</span>
            </el-menu-item>
        </el-menu>
      </el-aside>

      <el-container>
        <el-header :style="[{'background-color':theme.header.bg},{'color':theme.header.color}]">
          <div class="left header-wrap">
            <div class="icon-wrap">
              <i v-if="isCollapse" class="icon el-icon-s-unfold" @click="isCollapse=false"></i>
              <i v-else class="icon el-icon-s-fold" @click="isCollapse=true"></i>
            </div>
<!--            面包屑-->
            <el-breadcrumb separator="/">
              <el-breadcrumb-item>首页</el-breadcrumb-item>
              <el-breadcrumb-item v-for="(item,index) in breadcrumb" :key="index"><a>{{item.title}}</a></el-breadcrumb-item>
            </el-breadcrumb>
<!--            面包屑-->
          </div>
          <div class="right header-wrap">
<!--            <el-dropdown>-->
<!--              <i class="el-icon-setting" style="margin-right: 15px"></i>-->
<!--              <el-dropdown-menu slot="dropdown">-->
<!--                <el-dropdown-item>查看</el-dropdown-item>-->
<!--                <el-dropdown-item>新增</el-dropdown-item>-->
<!--                <el-dropdown-item>删除</el-dropdown-item>-->
<!--              </el-dropdown-menu>-->
<!--            </el-dropdown>-->

            <el-dropdown>
              <div class="el-dropdown-link login-user-wrap">
                <el-avatar style="margin-bottom: 10px;" :src="baseURL+loginAdmin.admin_pic"></el-avatar>
                <span>{{loginAdmin.admin_name}}</span>
              </div>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item disabled>修改信息</el-dropdown-item>
                <el-dropdown-item disabled>修改密码</el-dropdown-item>
                <el-dropdown-item divided @click.native="exitClick">退出</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>

            <i class="el-icon-s-operation" @click="drawer = true"></i>
          </div>
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>


    <el-drawer
        class="theme-drawer"
        title="我是标题"
        :visible.sync="drawer"
        :with-header="false">
      <div class="theme-drawer-wrap">
        <div class="title">配色方案</div>
        <div class="content">
            <div class="mok" v-for="(item,index) in themelist" :key="index" @click="themClick(item)">
                <div class="header" :style="{'background-color':item.header.bg}"></div>
                <div class="left" :style="{'background-color':item.menu.bg}">
                  <div class="left-top" :style="{'background-color':item.logo}"></div>
                </div>
            </div>
        </div>
      </div>
    </el-drawer>

  </div>
</template>

<script>
// @ is an alias to /src

import menu from '../assets/menu.json'
export default {
  name: 'Home',
  components: {
  },
  data(){
    return {
      activeName: 'first',
      isCollapse:false,
      menulist:menu.menulist,
      themelist:menu.themelist,
      breadcrumb:[],
      drawer: false,
      theme:null,
      loginAdmin:{}
    }
  },
  watch:{
    $route:{
      handler:function (val, oldVal){
        //查找相对应的菜单
          for(let i of this.menulist) {
               // group用户管理
            if(i.group){
              for (let j of i.group) {
                for (let x of j.menu) {
                  if(x.path==val.path){
                    this.breadcrumb=[i,x];
                    return;
                  }
                }
              }
            }
            if(i.path==val.path){
              this.breadcrumb=[i]
              return;
            }
          }
          return this.breadcrumb=[]
      },
      deep:true
    }
  },
  created() {
    this.loginAdmin=this.$store.state.user;
    this.theme=this.$store.state.theme
  },
  methods:{
    gotoPage(){
      this.$router.push("/index")
    },
    themClick(item){
      this.$store.dispatch('savetheme',item)
      this.theme=item;
    },
    exitClick(){
      this.$store.dispatch('exit')
      this.$router.replace("/login")
    }
  }
}
</script>
<style lang="scss" >
.logo{
  height: var(--header-height);
  font-size: var(--font-size-big);
  line-height: var(--header-height);
  text-align: center;
  color: #fff;
  font-weight: 500;
  letter-spacing: 2px;
}
.el-container{
  min-height: 100%;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.el-aside{
  width: auto !important;
}
.el-main{
  background: var(--them-bg-bottom);
}


.el-header{
  height: var(--header-height);
  font-size: var(--font-size-small);
  line-height: var(--header-height);
  border-bottom: var(--border-style);
  box-sizing: border-box;
  .el-dropdown,.el-breadcrumb__inner{
    color: inherit !important;
  }
  //background-color: var(--them-bg-base);
  .header-wrap{
    display: flex;
    align-items: center;
    &>div{
      margin-right: 10px;
    }
  }
  .login-user-wrap{
    display: flex;
    align-items: center;

  }
}
.theme-drawer{
  .el-drawer{
    width: 25% !important;
  }
 .theme-drawer-wrap{
    .title{
      height: 42px;
      line-height: 42px;
      padding: 0 15px;
      border-bottom: 1px solid #f6f6f6;
      color: #333;
      border-radius: 2px 2px 0 0;
      font-size: 14px;
    }
    .content{
      padding:15px;
      .mok{
        display: inline-block;
        background-color: #f2f2f2;
        position: relative;
        height:70px;
        width: 100px;
        margin: 0 15px 15px 0;
        box-sizing: border-box;
        border: 1px solid #afafaf;
        transition: border-bottom-color .5s ease-in;
        &:hover{
          border: 1px solid #0019ff;
        }
        .header{
          position: relative;
          z-index: 10;
          height: 10px;
        }
        .left{
          position: absolute;
          left: 0;
          top: 0;
          width: 20px;
          height: 100%;
          z-index: 11;
          .left-top{
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 10px;
          }
        }
      }
    }
  }
}


</style>